import Sider from "antd/es/layout/Sider";
import React, { FC, memo, useState } from "react";
import { SiderWrapper } from "./style";

import CoffeeCard from "@/components/order/coffeeCard";
import { useAppSelector } from "@/store";
import SiderTop from "./SiderTop";

const OrderSider: FC = memo(() => {
  // 拿到咖啡选项、订单的store
  const { order } = useAppSelector((state) => ({
    order: state.coffeeOrder,
  }));

  return (
    <SiderWrapper>
      <Sider className="sider">
        <SiderTop index={order.orderList.length} />
        <div className="orderList">
          {order.orderList &&
            order.orderList.map((item, index) => {
              // 放上面
              return (
                <CoffeeCard
                  key={index}
                  item={item.order}
                  index={index}
                  orderNumber={item.orderIndex}
                  time={item.time}
                ></CoffeeCard>
              );
            })}
        </div>
      </Sider>
    </SiderWrapper>
  );
});

export default OrderSider;
